<template>
    <div class="main-content">
        <TableLayoutes form-title="" class="table-list"> 
            <div class="table-title" slot="table-title">
                <span class="table-title-span">收费范围</span>
                <el-button @click="editRange()">修改</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading="loading">                     
                <el-table-column label="属性" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sName | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sValue" label="大小（元）" align="center"></el-table-column>
            </el-table>
        </TableLayoutes>

        <!-- 修改收费范围 -->
        <edit-charge-range :editRangeData='editRangeData' @search='getTableData'></edit-charge-range>
    </div>
</template>

<script>
    import editChargeRange from './editChargeRange';
    import TableLayoutes from 'components/TableLayoutes';
    import { listIncrementService } from 'api/serviceManage';
    export default{
        name: 'chargeRange',
        components: {TableLayoutes, editChargeRange},
        data() {
            return {
                loading: true,
                editRangeData: {
                    dialogState: false,
                    minVal: '',
                    maxVal: '',
                    id: ''
                },
                tableData: [],
                minVal: '',
                maxVal: ''
            }
        },
        computed: {
        
        },
        created() {
            this.getTableData();
        },
        methods: {
            getTableData() {
                listIncrementService().then(response => {
                    this.loading = false;
                    // 商品类型(1:服务种类 2:收费方式 3：收费范围)
                    response.data.content.forEach(function(element) { 
                        if (element.sType == '3') {
                            
                            if (element.sName) {
                                this.minVal = element.sName.split(',')[0];
                                this.maxVal = element.sName.split(',')[1];
                            }
                            this.editRangeData.id = element.pId;
                            this.editRangeData.minVal = this.minVal;
                            this.editRangeData.maxVal = this.maxVal;
                            this.tableData = [];
                            this.tableData.push({ 'sName': '最低', 'sValue': this.minVal}, { 'sName': '最高', 'sValue': this.maxVal});
                        }
                    }, this);
                    
                }).catch(() => {
                    this.loading = false;
                });
            },
            editRange() {
                this.editRangeData.dialogState = true;
            }
        }
    }
</script>
<style lang="scss">
    .main-content {
        position: relative;
        padding: 0px;
        .table-list {
            .table-box {
                padding-bottom: 0px;
            }
        } 
    }
</style>                     